import {
    Box,
    Breadcrumbs,
    Button,
    Container,
    Divider,
    Grid,
    Link,
    Pagination,
    Paper,
    ThemeProvider,
    Typography
} from "@mui/material";

import React, {useEffect} from "react";


import {createTheme} from "@mui/material/styles";
import {get163SingerByCat} from '../../utils/request/163request'
import {getQSingerByCats, getQSingerCats} from "../../utils/request/qrequest";
import Loading from "../Loading/Loading";
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
import ToggleButton from "@mui/material/ToggleButton";
import _ from "lodash";
import SingerCard from "./SingerCard";
import PubSub from "pubsub-js";

const theme = createTheme({
    palette: {
        primary: {
            main: 'rgba(255,255,255,0)',
            contrastText: 'black',
            light: 'rgba(255,255,255,0)'
        },
    },
});
export default function SingerListPage(props){
    let [alignment, setAlignment] = React.useState('163');

    //163的分类列表控制
    let [neteaseType, setNeteaseType] = React.useState(-1);
    let [neteaseInitial, setNeteaseInitial] = React.useState(-1);
    let [neteaseArea, setNeteaseArea] = React.useState(-1);

    //qq的分类控制
    let [qqGenre, setQqGenre] = React.useState(-100);
    let [qqindex, setQqIndex] = React.useState(-100);
    let [qqArea, setQqArea] = React.useState(-100);
    let [qqSex, setQqSex] = React.useState(-100);

    //分页
    let [page, setPage] = React.useState(1);
    let [pageCount, setPageCount] = React.useState(0);
    let [perPage, setPerPage] = React.useState(30);
    //控制163加载数据
    let [hasInit, setHasInit] = React.useState(0);


    //数据
    let [singers, setSingers] = React.useState([]);
    let [more, setMore] = React.useState(false);



    const handleAlignment = (event, newAlignment) => {

        if(newAlignment !== alignment && newAlignment !== null && newAlignment !== undefined) {
            setAlignment(newAlignment);
            alignment = newAlignment;
            setLoading(true)
            init().then((r) => {
             setLoading(false);
            }).catch((r) => {
                setLoading(false)
            })
        }
    };
    let neteaseCat = {
            "area": [
                {
                    "id": -1,
                    "name": "全部"
                },
                {
                    "id": 7,
                    "name": "华语"
                },
                {
                    "id": 96,
                    "name": "欧美"
                },
                {
                    "id": 8,
                    "name": "日本"
                },
                {
                    "id": 16,
                    "name": "韩国"
                },
                {
                    "id": 0,
                    "name": "其他"
                }
            ],
            "initial": [
                {
                    "id": -1,
                    "name": "热门"
                },
                {
                    "id": 'a',
                    "name": "A"
                },
                {
                    "id": 'b',
                    "name": "B"
                },
                {
                    "id": 'c',
                    "name": "C"
                },
                {
                    "id": 'd',
                    "name": "D"
                },
                {
                    "id": 'e',
                    "name": "E"
                },
                {
                    "id": 'f',
                    "name": "F"
                },
                {
                    "id": 'g',
                    "name": "G"
                },
                {
                    "id": 'h',
                    "name": "H"
                },
                {
                    "id": 'i',
                    "name": "I"
                },
                {
                    "id": 'j',
                    "name": "J"
                },
                {
                    "id": 'k',
                    "name": "K"
                },
                {
                    "id": 'l',
                    "name": "L"
                },
                {
                    "id": 'm',
                    "name": "M"
                },
                {
                    "id": 'n',
                    "name": "N"
                },
                {
                    "id": 'o',
                    "name": "O"
                },
                {
                    "id": 'p',
                    "name": "P"
                },
                {
                    "id": 'q',
                    "name": "Q"
                },
                {
                    "id": 'r',
                    "name": "R"
                },
                {
                    "id": 's',
                    "name": "S"
                },
                {
                    "id": 't',
                    "name": "T"
                },
                {
                    "id": 'u',
                    "name": "U"
                },
                {
                    "id": 'v',
                    "name": "V"
                },
                {
                    "id": 'w',
                    "name": "W"
                },
                {
                    "id": 'x',
                    "name": "X"
                },
                {
                    "id": 'y',
                    "name": "Y"
                },
                {
                    "id": 'z',
                    "name": "Z"
                },
                {
                    "id": '0',
                    "name": "#"
                },
            ],
            "type": [
                {
                    "id": -1,
                    "name": "全部"
                },
                {
                    "id": 1,
                    "name": "男歌手"
                },
                {
                    "id": 2,
                    "name": "女歌手"
                },
                {
                    "id": 3,
                    "name": "乐队"
                }
            ]
    }
    //控制loading动画的显示
    const [loading, setLoading] = React.useState(false);
    const [qqCats, setQqCats] = React.useState({});

    useEffect(async () => {
        PubSub.publish("changeTopBarByUrl",'4');
        setLoading(true);
        await init().catch((r) => {
            setLoading(false)
        })
        await getQSingerCats((r) => {
            setQqCats(r);
        }).catch(() => {
            setLoading(false)
        })
        setLoading(false)
    },[])

    async function init(){
        setSingers([]);
        singers = [];
        setPage(1);
        page = 1;
        setHasInit(0);
        hasInit = 0;
        //console.log("initListpage")
        await send(1,perPage)
    }

    async function send(pages,perPages){
        //console.log('send')
        if(alignment === '163'){
            if(pages <= hasInit){
                //console.log('send1')
                return
            }
            //console.log('send2')
            await get163SingerByCat({
                type: neteaseType,
                area: neteaseArea,
                initial: neteaseInitial
            },pages,perPages,(r) => {
                //console.log('send3')
                //console.log(r)
                setSingers(_.concat(singers,r.v));
                setHasInit(pages);
                setMore(r.more)
            })
        }else {
            await getQSingerByCats({
                area:qqArea,
                genre:qqGenre,
                index:qqindex,
                sex:qqSex
            },pages,(r) => {
                //console.log(r)
                setPageCount(r.count % 80 > 0 ? Math.floor(r.count / 80) + 1 : r.count / 80)
                setSingers(r.v)
            })
        }
    }

    function changeType(c){
        return (e) => {
            e.preventDefault();
            //console.log(c)
            setNeteaseType(c);
            neteaseType = c;
            setHasInit(0);
            hasInit = 0;
            setLoading(true);
            init().then((r) => {
                setLoading(false)
            }).catch((r) => {
                setLoading(false)
            })

        }
    }
    function changeArea(c){
        return (e) => {
            //console.log(c)
            e.preventDefault();
            setHasInit(0);
            hasInit = 0;
            setNeteaseArea(c);
            neteaseArea = c;
            setLoading(true);
            init().then((r) => {
                setLoading(false)
            }).catch((r) => {
                setLoading(false)
            })
        }
    }
    function changeInitial(c){
        return (e) => {
            //console.log(c)
            e.preventDefault();
            setHasInit(0);
            hasInit = 0;
            setNeteaseInitial(c);
            neteaseInitial = c;
            setLoading(true);
            init().then((r) => {
                setLoading(false)
            }).catch((r) => {
                setLoading(false)
            })
        }
    }
    function changeQArea(c){
        return (e) => {
            //console.log(c)
            e.preventDefault();
            setQqArea(c);
            qqArea = c;
            setLoading(true);
            init().then((r) => {
                setLoading(false)
            }).catch((r) => {
                setLoading(false)
            })
        }
    }
    function changeQGenre(c){
        return (e) => {
            //console.log(c)
            e.preventDefault();
            setQqGenre(c);
            qqGenre = c;
            setLoading(true);
            init().then((r) => {
                setLoading(false)
            }).catch((r) => {
                setLoading(false)
            })
        }
    }
    function changeQIndex(c){
        return (e) => {
            //console.log(c)
            e.preventDefault();
            setQqIndex(c);
            qqindex = c;
            setLoading(true);
            init().then((r) => {
                setLoading(false)
            }).catch((r) => {
                setLoading(false)
            })
        }
    }
    function changeQSex(c){
        return (e) => {
            //console.log(c)
            e.preventDefault();
            setQqSex(c);
            qqSex = c;
            setLoading(true);
            init().then((r) => {
                setLoading(false)
            }).catch((r) => {
                setLoading(false)
            })
        }
    }



    function getMore(){

        let needInit = page + 1;
        setPage(needInit);
        page = needInit;
        setLoading(true);
        send(page,perPage).then((r) => {
            setLoading(false)
        }).catch((r) => {
            setLoading(false)
        });

    }
    const handleChange = (event, value) => {
        page = value;
        setPage(value);
        setLoading(true);
        setLoading(true)
        send(page,80).then(() => {
         setLoading(false)
        }).catch(() => {
            setLoading(false)
        })
    };
    function NeteasePage(props){
        return(
            <>
                <Grid container
                      direction="row"
                      justifyContent="center"
                      alignItems="flex-center"
                      marginLeft={10}
                      >
                    <Grid container item xs={12} alignItems="center" justifyContent="left">
                        <Typography variant="h6" >地区:&nbsp;&nbsp;&nbsp;</Typography>
                        <Breadcrumbs separator="|" aria-label="breadcrumb">
                            {neteaseCat.area.map((r) => {
                                return(
                                    <Link  underline="hover"
                                           color="inherit"
                                           href=""
                                           onClick={changeArea(r.id)}
                                           key={r.id + 'a'}
                                    >

                                        <div key={r.id+'ad'} className={`${neteaseArea === r.id? 'underline':''}`}>{r.name}</div>
                                    </Link>
                                )
                            })}
                        </Breadcrumbs>
                    </Grid>
                    <Grid container item xs={12} alignItems="center" justifyContent="left">
                        <Typography variant="h6" >分类:&nbsp;&nbsp;&nbsp;</Typography>
                        <Breadcrumbs separator="|" aria-label="breadcrumb">
                            {neteaseCat.type.map((r) => {
                                return(
                                    <Link  underline="hover"
                                           color="inherit"
                                           href="#"
                                           onClick={changeType(r.id)}
                                           key={r.id+ 't'}
                                    >

                                        <div key={r.id+ 'ty'} className={`${neteaseType === r.id? 'underline':''}`}>{r.name}</div>
                                    </Link>
                                )
                            })}
                        </Breadcrumbs>
                    </Grid>
                    <Grid container item xs={12} alignItems="center" justifyContent="left">
                        <Typography variant="h6" >筛选:&nbsp;&nbsp;&nbsp;</Typography>
                        <Breadcrumbs  maxItems={30} separator="|" aria-label="breadcrumb">
                            {neteaseCat.initial.map((r) => {
                                return(
                                    <Link  underline="hover"
                                           color="inherit"
                                           href="#"
                                           onClick={changeInitial(r.id)}
                                           key={r.id + 'i'}
                                    >

                                        <div key={r.id + 'id'} className={`${neteaseInitial === r.id? 'underline':''}`}>{r.name}</div>
                                    </Link>
                                )
                            })}
                        </Breadcrumbs>
                    </Grid>
                </Grid>
                <Divider/>
                <Grid container
                      direction="row"
                      justifyContent="left"
                      alignItems="flex-center"
                        marginLeft={10}
                >
                {singers.map((r) => {

                    return(
                            <Grid item xs={3}>
                                <SingerCard key={r.id} {...r} allSinger={singers} />

                            </Grid>
                        )


                })}
                </Grid>
                {more &&
                    <Grid container
                          direction="row"
                          justifyContent="center"
                          alignItems="flex-center"

                    >
                        <ThemeProvider theme={theme}>
                            <Button color={"primary"} variant="contained" onClick={getMore} sx={{marginTop:10}}>
                                点击加载更多
                            </Button>
                        </ThemeProvider>
                    </Grid>
                }
            </>
        )
    }
    function QQPage(props){
        return(
            <>
                <Grid container
                      direction="row"
                      justifyContent="center"
                      alignItems="flex-center"
                      marginLeft={10}
                >
                    <Grid container item xs={12} alignItems="center" justifyContent="left">
                        <Typography variant="h6" >地区:&nbsp;&nbsp;&nbsp;</Typography>
                        <Breadcrumbs separator="|" aria-label="breadcrumb">
                            {qqCats.area.map((r) => {
                                return(
                                    <Link  underline="hover"
                                           color="inherit"
                                           href="#"
                                           onClick={changeQArea(r.id)}
                                           key={r.id}
                                    >

                                        <div className={`${qqArea === r.id? 'underline':''}`}>{r.name}</div>
                                    </Link>
                                )
                            })}
                        </Breadcrumbs>
                    </Grid>
                    <Grid container item xs={12} alignItems="center" justifyContent="left">
                        <Typography variant="h6" >风格:&nbsp;&nbsp;&nbsp;</Typography>
                        <Breadcrumbs maxItems={30}  separator="|" aria-label="breadcrumb">
                            {qqCats.genre.map((r) => {
                                return(
                                    <Link  underline="hover"
                                           color="inherit"
                                           href="#"
                                           onClick={changeQGenre(r.id)}
                                           key={r.id}
                                    >

                                        <div className={`${qqGenre === r.id? 'underline':''}`}>{r.name}</div>
                                    </Link>
                                )
                            })}
                        </Breadcrumbs>
                    </Grid>
                    <Grid container item xs={12} alignItems="center" justifyContent="left">
                        <Typography variant="h6" >首字母:&nbsp;&nbsp;&nbsp;</Typography>
                        <Breadcrumbs  maxItems={30} separator="|" aria-label="breadcrumb">
                            {qqCats.index.map((r) => {
                                return(
                                    <Link  underline="hover"
                                           color="inherit"
                                           href="#"
                                           onClick={changeQIndex(r.id)}
                                           key={r.id}
                                    >

                                        <div className={`${qqindex === r.id? 'underline':''}`}>{r.name}</div>
                                    </Link>
                                )
                            })}
                        </Breadcrumbs>
                    </Grid>
                    <Grid container item xs={12} alignItems="center" justifyContent="left">
                        <Typography variant="h6" >性别/组合:&nbsp;&nbsp;&nbsp;</Typography>
                        <Breadcrumbs  maxItems={30} separator="|" aria-label="breadcrumb">
                            {qqCats.sex.map((r) => {
                                return(
                                    <Link  underline="hover"
                                           color="inherit"
                                           href="#"
                                           onClick={changeQSex(r.id)}
                                           key={r.id}
                                    >

                                        <div className={`${qqSex === r.id? 'underline':''}`}>{r.name}</div>
                                    </Link>
                                )
                            })}
                        </Breadcrumbs>
                    </Grid>
                </Grid>
                <Divider/>
                <Grid container
                      direction="row"
                      justifyContent="left"
                      alignItems="flex-center"
                      marginLeft={10}
                >
                    {singers.map((r) => {

                        return(
                            <Grid item xs={3}>
                                <SingerCard key={r.id} {...r} allSinger={singers} />

                            </Grid>
                        )


                    })}
                </Grid>
                <Pagination count={pageCount} onChange={handleChange} page={page} sx={{marginTop:2}}/>
            </>
        )
    }

    return(
        <Container maxWidth="xl">
            <Paper className='page' elevation={3}>
                <Loading open={loading}/>
                <Grid
                    container
                    direction="row"
                    justifyContent="center"
                    alignItems="flex-center"
                >
                    <Box sx={{ p: 2 }} />
                    <Grid container direction='row' justifyContent='right'>
                        <ToggleButtonGroup
                            value={alignment}
                            exclusive
                            onChange={handleAlignment}
                            aria-label="text alignment"
                            sx={{marginRight:10}}
                        >
                            <ToggleButton value="163" aria-label="网易云音乐">
                                <img src='./png163.png' width={32} height={32}/>
                            </ToggleButton>
                            <ToggleButton value="qq" aria-label="qq音乐">
                                <img src='./icoqq.png' width={32} height={32}/>
                            </ToggleButton>
                        </ToggleButtonGroup>
                    </Grid>
                    {alignment === '163'? <NeteasePage/>:<QQPage/>}
                    <Box sx={{p:6}}></Box>
                </Grid>
            </Paper>

        </Container>
    )

}